<!-- listPage 2.0 -->
<template slot-scope="scope">
  <div class="device-list animate__animated animate__zoomIn">
    <!-- 头部 -->
    <div v-if="!loadingFlag" class="top">
      <div class="top-a">
        <dv-decoration-11 style="width: 25%; height: 80%; font-size: 0.26rem">{{
          $store.getters.getListTitle || ""
        }}</dv-decoration-11>
        <!-- 概况统计 -->
        <div
          class="device-count"
          v-if="$store.getters.getListCategory == 'postGetUseDevList'"
        >
          <dv-decoration-7
            ><h1 @click="toCount('device-count')">
              设备概况统计
            </h1></dv-decoration-7
          >
        </div>
        <div
          class="device-count"
          v-else-if="$store.getters.getListCategory == 'postGetComInfoList'"
        >
          <dv-decoration-7
            ><h1 @click="toCount('unit-count')">
              单位概况统计
            </h1></dv-decoration-7
          >
        </div>
        <!-- 返回 -->
        <div class="go-back">
          <GoBack></GoBack>
        </div>
      </div>

      <div class="top-b">
        <div class="device-list-select">
          <!-- 地区下拉 -->
          <el-dropdown trigger="click" @command="handleArea">
            <span class="el-dropdown-link">
              {{
                this.$store.getters.getAreaList[$store.getters.getListAreaIndex]
                  .area_name || "连云港市"
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, i) in this.$store.getters.getAreaList"
                :key="i"
                :command="[item.area_code, i]"
                >{{ item.area_name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <div
            class="box1"
            v-if="$store.getters.getListCategory != 'postGetComInfoList'"
          ></div>
          <!-- 类型下拉 -->
          <el-dropdown
            trigger="click"
            @command="handleType"
            v-if="$store.getters.getListCategory != 'postGetComInfoList'"
          >
            <span class="el-dropdown-link">
              {{
                $store.getters.getListPageType.length > 0
                  ? $store.getters.getListPageType[
                      $store.getters.getListTypeIndex
                    ][nameStr[$store.getters.getListCategory]]
                  : "全部"
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, i) in $store.getters.getListPageType"
                :key="i"
                :command="{
                  index: i,
                  str: item[nameStr[$store.getters.getListCategory]],
                }"
                >{{
                  item[nameStr[$store.getters.getListCategory]]
                }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 数量 -->
        <div class="device-list-total">
          <span>数量：</span>
          <span>{{ listTotal }}</span>
        </div>
        <!-- 搜索框 -->
        <div class="device-list-search">
          <!-- <el-autocomplete
            v-model="inputStr"
            placeholder="搜索"
          ></el-autocomplete> -->
          <el-input v-model="inputStr" :placeholder="placeholder"></el-input>
          <div class="search-btn" @click="handleSearch">
            <i class="el-icon-search"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- main -->
    <div v-if="!loadingFlag" class="main">
      <div class="list-box">
        <!-- 边框 -->
        <!-- <dv-border-box-7 class="list-bd">
          <PublicList :revListData="$store.getters.getList" :isBorder="true"></PublicList>
        </dv-border-box-7> -->
        <!-- 列表内容在这里 -->
        <!-- <PublicList
          :revListData="$store.getters.getListData"
          :isBorder="true"
        ></PublicList> -->
        <DefaultList :revListData="$store.getters.getListData"></DefaultList>
      </div>
      <!-- 分页 -->
      <div v-if="!loadingFlag" class="list-pagi">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="listTotal"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <div v-if="loadingFlag" class="e-loading">
      <dv-loading style="color: #fff; opcity: 0.5"
        >设备列表数据加载中...</dv-loading
      >
    </div>
  </div>
</template>

<script>
import PublicList from "../components/list/PublicList";
import DefaultList from "../components/list/DefaultList"

export default {
  components: {
    PublicList,
    DefaultList,
  },
  data() {
    //这里存放数据
    return {
      inputStr: "", // 搜索框文字
      searchStr: "", // 参数：搜索文字
      areaList: this.$store.getters.getAreaList, // 区域下拉列表
      routePath: "", // 右上路由path
      routeName: "", // 右上字符
      currentPage: 1, // 当前页
      loadingFlag: true, // 加载完毕开关
      listTotal: 0, // 总数
      pageNum: 1, // 请求参数：页码
      pageSize: 10, // 请求参数：页大小
      placeholder: "", // 搜索框提示文字
      isFirst: true,
      nameStr: {
        postGetUseDevList: "dev_name",
        postGetPersonInfoById: "person_name",
        postGetHiddenList: "levelName",
        postGetOutDeviceList: "dev_name",
        postGetMonitorTList: "levelName",
        postGetDeviceSList: "dev_name",
        postGetNearDeviceList: "dev_name",
        postGetEmergencyMList: 'taskTypeName',
        postGetEmergencyAList: 'taskTypeName',
        postGetMHiddenList: 'levelName',
        postGetMWornHiddenList: 'levelName',
        postGetMWornMonitorList: 'levelName',
        postGetOperToldList: 'told_typename',
        postGetOperRegList: 'reg_typename',
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toCount(path) {
      this.$router.push({
        name: path,
        params: {},
      });
    },
    // 地区下拉
    handleArea(e) {
      this.$store.commit("setListAreaIndex", parseInt(e[1]));
      // return console.log(e);
      let mapType = "lyg";
      switch (e[0]) {
        case 320700000000:
          this.$store.commit("setListAreaIndex", 0);
          mapType = "lyg";
          break;
        case 320703000000:
          this.$store.commit("setListAreaIndex", 1);
          mapType = "lyq";
          break;
        case 320706000000:
          this.$store.commit("setListAreaIndex", 2);
          mapType = "hzq";
          break;
        case 320707000000:
          this.$store.commit("setListAreaIndex", 3);
          mapType = "gyq";
          break;
        case 320722000000:
          this.$store.commit("setListAreaIndex", 4);
          mapType = "dhx";
          break;
        case 320723000000:
          this.$store.commit("setListAreaIndex", 5);
          mapType = "gyx";
          break;
        case 320724000000:
          this.$store.commit("setListAreaIndex", 6);
          mapType = "gnx";
          break;
        default:
          return console.log("我丢...");
      }
      this.$store.commit("setMapType", mapType);
      // this.lygjson = this.getLygJson()[this.$store.getters.getMapType];
      this.currentPage = 1
      this.pageNum = 1
      this.init();
    },
    // 类型下拉
    handleType(command) {
      console.log(
        command.index + " => " + command.str + " || code:" + command.code
      );
      this.$store.commit("setListTypeIndex", command.index);
      this.currentPage = 1
      this.pageNum = 1
      this.init();
    },
    handleSelect(item) {
      console.log(item);
    },
    handleSearch() {
      console.log("搜索的关键词：" + this.inputStr);
      this.searchStr = this.inputStr.trim();

      this.init();
    },

    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.init();
    },

    // 转换表头
    changeHead(data) {
      console.log("开始转换表头");
      let head = [];
      let isBtn = false;
      for (const key in data) {
        // console.log(key + '::' + data[key]);
        if (key == "show_but") {
          isBtn = true;
          continue;
        }
        head.push({
          name: data[key],
          prop: key,
        });
      }

      if (isBtn) {
        head.push({
          name: data["show_but"],
          prop: "show_but",
        });
      }

      console.log(head);
      return head;
    },

    // (公用)获取列表数据
    async getListData(params) {
      // 获取列表数据
      console.log("发送的参数");
      console.log(params);

      let arr = await this.$http[this.$store.getters.getListCategory](params);
      if (arr.data.errorCode != 0) {
        console.log("后台异常");
        return false;
      }
      console.log(arr.data);
      let data = arr.data.data;
      // data.colMap = this.changeHead(data.colMap)
      return data;
    },

    // 1.1 获取设备类型下拉列表
    async getDevListType() {
      // 获取类型
      let type = await this.$http["postGetDevKindList"]();
      let ret1 = type.data;
      if (ret1.errorCode != 0) {
        console.log("后台运行异常!");
        return console.log(ret1);
      }
      // console.log(ret1.data);
      ret1.data.unshift({
        dev_name: "全部",
        dev_code: "",
      });
      this.$store.commit("setListPageType", ret1.data);
    },

    // 1.2 获取设备列表数据
    async getDevList() {
      let dev_code =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].dev_code
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        dev_code,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      console.log(data);
      this.listTotal = data.total; // 列表总数

      // 下拉列表
      // let types = data.selectList
      // types.unshift({
      //   dev_name: "全部",
      //   dev_code: null,
      // });
      // this.$store.commit("setListPageType", types);

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      // console.log(listData);

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 2 单位列表数据
    async getUnitList() {
      console.log("开始单位了");

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      // console.log(data);
      this.listTotal = data.total; // 列表总数
      // let head = this.changeHead(data.colMap)
      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      this.$store.commit("setListData", listData);
      console.log(listData);
      this.loadingFlag = false;
    },

    // 3.1 人员类型列表 ---------------------------------------------------
    async getPersonListType() {
      // 获取类型
      let type = await this.$http["postGetPersonTypeList"]();
      let ret1 = type.data;
      if (ret1.errorCode != 0) {
        console.log("后台运行异常!");
        return console.log(ret1);
      }
      this.$store.commit("setListPageType", ret1.data);
    },

    // 3.2 人员列表数据
    async getPersonList() {
      let person_type =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].person_type
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        person_type,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      // console.log('------------------------------');
      // console.log(data);
      this.listTotal = data.total; // 列表总数

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      // console.log(listData);

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 4.1 隐患等级列表---------------------------------------------------
    async getHidLel() {
      let hidArr = this.$store.getters.getHiddenLevel
      this.$store.commit("setListPageType", hidArr);
    },

    // 4.2 隐患条数 隐患等级列表---------------------------------------------------
    async getWarnList() {
      let level =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].levelValue
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        level,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      console.log(data);
      if (!data) {
        return console.log("数据异常");
      }

      // 下拉列表
      // let types = data.levelMap;
      // types.unshift({
      //   levelName: "全部",
      //   levelValue: null,
      // });
      // this.$store.commit("setListPageType", types);

      this.listTotal = data.total; // 列表总数

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      // console.log(listData);

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 5.1 超期未检列表---------------------------------------------------
    async getOverList() {
      let dev_code =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].dev_code
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        dev_code,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      console.log(data);
      this.listTotal = data.total; // 列表总数

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 6.1 隐患等级列表---------------------------------------------------
    async getTaskLel() {
      let taskArr = this.$store.getters.getTasksLevel
      this.$store.commit("setListPageType", taskArr);
    },

    // 6.2 监察总数 ------------------------------------------------------
    async getOutMonitor() {
      let origin =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].levelValue
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        origin,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      // return console.log(data);
      if (!data) {
        return console.log("数据异常");
      }

      // 下拉列表
      // let types = data.levelMap;
      // types.unshift({
      //   levelName: "全部",
      //   levelValue: null,
      // });
      // this.$store.commit("setListPageType", types);

      this.listTotal = data.total; // 列表总数

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      // console.log(listData);

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 7.1 检验检测列表---------------------------------------------------
    async getDeviceS() {
      let dev_code =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].dev_code
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        dev_code,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      // return console.log(data);
      this.listTotal = data.total; // 列表总数

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 8.1 及期未检列表---------------------------------------------------
    async getNearDeviceS() {
      let dev_code =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].dev_code
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        dev_code,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      console.log(data);
      this.listTotal = data.total; // 列表总数

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 9.1 当月/累计 电梯救援列表---------------------------------------------------
    async getEmergencyMList() {
      // return console.log('');
      let origin =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].taskTypeValue
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        origin,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      // return console.log(data);
      this.listTotal = data.total; // 列表总数

      // 下拉类型
      let eType = data.levelMap
      eType.unshift({
        taskTypeName: "全部",
        taskTypeValue: "",
      });
      this.$store.commit("setListPageType", eType);

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 10.1 当月/累计 监察任务列表---------------------------------------------------
    async getMHiddenList() {
      // return console.log('');
      let origin =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].levelValue
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        origin,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      // return console.log(data);
      this.listTotal = data.total; // 列表总数

      // 下拉类型
      let eType = data.levelMap
      eType.unshift({
        levelName: "全部",
        levelValue: "",
      });
      this.$store.commit("setListPageType", eType);

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 11.1 当月/累计 监察任务列表---------------------------------------------------
    async getMWornHiddenList() {
      // return console.log('');
      let origin =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].levelValue
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        origin,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      // return console.log(data);
      this.listTotal = data.total; // 列表总数

      // 下拉类型
      let eType = data.levelMap
      eType.unshift({
        levelName: "全部",
        levelValue: "",
      });
      this.$store.commit("setListPageType", eType);

      let listData = {
        head1: data.colMap,
        body: data.infoList,
      };

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 12.1 施工告知列表---------------------------------------------------
    async getOperToldList() {
      // return console.log('施工告知列表');
      let told_type =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].told_type
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        told_type,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      // return console.log(data);
      this.listTotal = data.total; // 列表总数

      // 下拉类型
      let eType = data.selectList
      eType.unshift({
        told_typename: "全部",
        told_type: "",
      });
      this.$store.commit("setListPageType", eType);

      let listData = {
        head1: data.colMap,
        body: data.toldList,
      };

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },

    // 13.1 使用登记列表---------------------------------------------------
    async getOperRegList() {
      // return console.log('使用登记列表');
      let reg_type =
        this.$store.getters.getListPageType.length > 0
          ? this.$store.getters.getListPageType[
              this.$store.getters.getListTypeIndex
            ].reg_type
          : null;

      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        reg_type,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serarchParam: this.searchStr,
      };

      let data = await this.getListData(params);
      // return console.log(data);
      this.listTotal = data.total; // 列表总数

      // 下拉类型
      let eType = data.selectList
      eType.unshift({
        reg_typename: "全部",
        reg_type: "",
      });
      this.$store.commit("setListPageType", eType);

      let listData = {
        head1: data.colMap,
        body: data.regList,
      };

      this.$store.commit("setListData", listData);
      // 开
      this.loadingFlag = false;
    },
    

    // --------------------------------
    async init() {
      this.loadingFlag = true;

      switch (this.$store.getters.getListCategory) {
        case "postGetUseDevList": // 设备数
          this.placeholder = "设备代码/设备名称/单位名称";
          await this.getDevListType();
          await this.getDevList();
          break;

        case "postGetComInfoList": // 在用单位数
          this.placeholder = "单位名称/社会信用代码";
          await this.getUnitList();
          break;

        case "postGetPersonInfoById": // 人员概况
          this.placeholder = "";
          await this.getPersonListType();
          await this.getPersonList();
          break;

        case "postGetHiddenList": // 隐患
          this.placeholder = "单位名称";
          await this.getHidLel()
          await this.getWarnList();
          break;

        case "postGetOutDeviceList": // 超期未检
          this.placeholder = "设备名称/单位名称";
          await this.getDevListType();
          await this.getOverList();
          break;

        case "postGetMonitorTList": // 监察总数
          this.placeholder = "使用单位/处置措施";
          await this.getTaskLel();
          await this.getOutMonitor();
          break;

        case "postGetDeviceSList": // 检验检测
          this.placeholder = "单位名称";
          await this.getDevListType();
          await this.getDeviceS();
          break;

        case "postGetNearDeviceList": // 及期未检 
          this.placeholder = "设备名称/单位名称";
          await this.getDevListType();
          await this.getNearDeviceS();
          break;

        case "postGetEmergencyMList": // 当月电梯救援数量 
          this.placeholder = "电梯编码/维保单位";
          await this.getEmergencyMList();
          break;

        case "postGetEmergencyAList": // 累计电梯救援数量 
          this.placeholder = "电梯编码/维保单位";
          await this.getEmergencyMList();
          break;

        case "postGetMHiddenList":    // 当月监察任务 
          this.placeholder = "使用单位/处置措施";
          await this.getMHiddenList();
          break;

        // case "postGetMHiddenList":    // 累计监察任务 ******************
        //   this.placeholder = "";
        //   await this.getMHiddenList();
        //   break;

        case "postGetMWornHiddenList":    // 当月预警监察列表 
          this.placeholder = "单位名称";
          await this.getMWornHiddenList();
          break;

        case "postGetMWornMonitorList":    // 累计预警监察列表 
          this.placeholder = "单位名称";
          await this.getMWornHiddenList();
          break;

        case "postGetOperToldList":         // 施工告知列表 
          this.placeholder = "施工单位名称";
          await this.getOperToldList();
          break;

        case "postGetOperRegList":         // 使用登记列表 
          this.placeholder = "使用单位名称";
          await this.getOperRegList();
          break;

        default:
          console.log("待定1....");
          break;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
};
</script>
<style lang='less' scoped>
.device-list {
  width: 100%;
  height: 100%;
  position: relative;
  .top {
    width: 100%;
    height: 20%;
    .top-a,
    .top-b {
      width: 100%;
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      color: @FontColor;
      .device-count {
        position: absolute;
        right: 1%;
        top: 18%;
        font-size: 0.22rem;
        color: @FontColor;
      }
      .box1 {
        width: 1.5rem;
        height: 100%;
      }
      .device-list-select {
        // width: 25%;
        padding: 0.05rem 0.5rem;
        height: 80%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 0.1rem;
        border: 1px solid @BorderColor;
        position: absolute;
        left: 3%;
      }
      .device-list-total {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: @FontColor;
        font-size: 0.28rem;
      }
      .device-list-search {
        width: 4rem;
        height: 0.6rem;
        position: absolute;
        right: 3%;
        .search-btn {
          width: 0.5rem;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          i {
            font-size: 0.32rem;
            color: #afb5c6;
          }
        }
      }

      .go-back {
        position: absolute;
        left: 0;
        top: 2%;
      }
    }
    .top-b {
      height: 40%;
      position: relative;
    }
    .goBack {
      position: absolute;
      left: 1%;
      top: 2%;
      font-size: 0.22rem;
      color: @FontColor;
    }
    .goBack:hover {
      color: @HoverColor!important;
    }
  }

  .main {
    width: 100%;
    height: 80%;
    position: relative;
    // background-color: pink;
    // background-color: rgba(0, 0, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    .list-box {
      width: 95%;
      height: 85%;
      border: none;
      .list-bd {
        // background-color: #ccc;
        width: 100%;
      }
    }
    .list-pagi {
      width: 95%;
      height: 10%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
}

// 分页样式
</style>